
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="iconfont.css">
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                <i class="icon iconfont icon-dianhua"></i>
                    <div class="name">电话</div>
                    <div class="fontclass">.icon-dianhua</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dianhuajianpan"></i>
                    <div class="name">电话键盘</div>
                    <div class="fontclass">.icon-dianhuajianpan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-huchudianhua"></i>
                    <div class="name">呼出电话</div>
                    <div class="fontclass">.icon-huchudianhua</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-laidianxianshi"></i>
                    <div class="name">来电显示</div>
                    <div class="fontclass">.icon-laidianxianshi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-mima"></i>
                    <div class="name">密码</div>
                    <div class="fontclass">.icon-mima</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chuzuche"></i>
                    <div class="name">出租车</div>
                    <div class="fontclass">.icon-chuzuche</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dengpaotishi"></i>
                    <div class="name">灯泡提示</div>
                    <div class="fontclass">.icon-dengpaotishi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-feijichang"></i>
                    <div class="name">飞机场</div>
                    <div class="fontclass">.icon-feijichang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-hujiaozhuanyi"></i>
                    <div class="name">呼叫转移</div>
                    <div class="fontclass">.icon-hujiaozhuanyi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-huangguan"></i>
                    <div class="name">皇冠</div>
                    <div class="fontclass">.icon-huangguan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-huochezhan"></i>
                    <div class="name">火车站</div>
                    <div class="fontclass">.icon-huochezhan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qichezhan"></i>
                    <div class="name">汽车站</div>
                    <div class="fontclass">.icon-qichezhan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qunzu"></i>
                    <div class="name">群组</div>
                    <div class="fontclass">.icon-qunzu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shanchu"></i>
                    <div class="name">删除</div>
                    <div class="fontclass">.icon-shanchu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shezhi"></i>
                    <div class="name">设置</div>
                    <div class="fontclass">.icon-shezhi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shengyin"></i>
                    <div class="name">声音</div>
                    <div class="fontclass">.icon-shengyin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shizhong"></i>
                    <div class="name">时钟</div>
                    <div class="fontclass">.icon-shizhong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouye"></i>
                    <div class="name">首页</div>
                    <div class="fontclass">.icon-shouye</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-sousuo"></i>
                    <div class="name">搜索</div>
                    <div class="fontclass">.icon-sousuo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tianjiayonghu"></i>
                    <div class="name">添加用户</div>
                    <div class="fontclass">.icon-tianjiayonghu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tongxunlu"></i>
                    <div class="name">通讯录</div>
                    <div class="fontclass">.icon-tongxunlu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiugai"></i>
                    <div class="name">修改</div>
                    <div class="fontclass">.icon-xiugai</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yonghu"></i>
                    <div class="name">用户</div>
                    <div class="fontclass">.icon-yonghu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zan"></i>
                    <div class="name">赞</div>
                    <div class="fontclass">.icon-zan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dianhuaqiaguzhang"></i>
                    <div class="name">电话卡故障</div>
                    <div class="fontclass">.icon-dianhuaqiaguzhang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-duihuaxinxi"></i>
                    <div class="name">对话信息</div>
                    <div class="fontclass">.icon-duihuaxinxi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-rili"></i>
                    <div class="name">日历</div>
                    <div class="fontclass">.icon-rili</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shipin"></i>
                    <div class="name">视频</div>
                    <div class="fontclass">.icon-shipin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tianjiadianhuaqia"></i>
                    <div class="name">添加sim卡</div>
                    <div class="fontclass">.icon-tianjiadianhuaqia</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tupian"></i>
                    <div class="name">图片</div>
                    <div class="fontclass">.icon-tupian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wuliu"></i>
                    <div class="name">物流</div>
                    <div class="fontclass">.icon-wuliu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xinfeng"></i>
                    <div class="name">信封</div>
                    <div class="fontclass">.icon-xinfeng</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yiyuan"></i>
                    <div class="name">医院</div>
                    <div class="fontclass">.icon-yiyuan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yinle"></i>
                    <div class="name">音乐</div>
                    <div class="fontclass">.icon-yinle</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-youxi"></i>
                    <div class="name">游戏</div>
                    <div class="fontclass">.icon-youxi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zuanshi"></i>
                    <div class="name">钻石</div>
                    <div class="fontclass">.icon-zuanshi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zuoji"></i>
                    <div class="name">座机</div>
                    <div class="fontclass">.icon-zuoji</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-ktv"></i>
                    <div class="name">ktv</div>
                    <div class="fontclass">.icon-ktv</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-simqia"></i>
                    <div class="name">sim卡</div>
                    <div class="fontclass">.icon-simqia</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wifi"></i>
                    <div class="name">wifi</div>
                    <div class="fontclass">.icon-wifi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-anquan"></i>
                    <div class="name">安全</div>
                    <div class="fontclass">.icon-anquan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bangzhu"></i>
                    <div class="name">帮助</div>
                    <div class="fontclass">.icon-bangzhu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bukaixin"></i>
                    <div class="name">不开心</div>
                    <div class="fontclass">.icon-bukaixin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dibiao"></i>
                    <div class="name">地标</div>
                    <div class="fontclass">.icon-dibiao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fenleiorguangchangorqita"></i>
                    <div class="name">分类or广场or其他</div>
                    <div class="fontclass">.icon-fenleiorguangchangorqita</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fenxiang"></i>
                    <div class="name">分享</div>
                    <div class="fontclass">.icon-fenxiang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiaxingshoucang"></i>
                    <div class="name">加星收藏</div>
                    <div class="fontclass">.icon-jiaxingshoucang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jinzhitishi"></i>
                    <div class="name">禁止提示</div>
                    <div class="fontclass">.icon-jinzhitishi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-kaixin"></i>
                    <div class="name">开心</div>
                    <div class="fontclass">.icon-kaixin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-liwu"></i>
                    <div class="name">礼物</div>
                    <div class="fontclass">.icon-liwu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qian"></i>
                    <div class="name">钱</div>
                    <div class="fontclass">.icon-qian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qingdan"></i>
                    <div class="name">清单</div>
                    <div class="fontclass">.icon-qingdan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tianjia"></i>
                    <div class="name">添加</div>
                    <div class="fontclass">.icon-tianjia</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiai"></i>
                    <div class="name">喜爱</div>
                    <div class="fontclass">.icon-xiai</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhengquetishi"></i>
                    <div class="name">正确提示</div>
                    <div class="fontclass">.icon-zhengquetishi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-biaoqian"></i>
                    <div class="name">标签</div>
                    <div class="fontclass">.icon-biaoqian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chongzhi"></i>
                    <div class="name">充值</div>
                    <div class="fontclass">.icon-chongzhi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-duigou"></i>
                    <div class="name">对勾</div>
                    <div class="fontclass">.icon-duigou</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-duihuan"></i>
                    <div class="name">兑换</div>
                    <div class="fontclass">.icon-duihuan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-erweima"></i>
                    <div class="name">二维码</div>
                    <div class="fontclass">.icon-erweima</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gengduo"></i>
                    <div class="name">更多</div>
                    <div class="fontclass">.icon-gengduo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-guanbi"></i>
                    <div class="name">关闭</div>
                    <div class="fontclass">.icon-guanbi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiantou"></i>
                    <div class="name">箭头</div>
                    <div class="fontclass">.icon-jiantou</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jinbiduihuan"></i>
                    <div class="name">金币兑换</div>
                    <div class="fontclass">.icon-jinbiduihuan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-saoyisao"></i>
                    <div class="name">扫一扫</div>
                    <div class="fontclass">.icon-saoyisao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shangchuan"></i>
                    <div class="name">上传</div>
                    <div class="fontclass">.icon-shangchuan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shuaxin"></i>
                    <div class="name">刷新</div>
                    <div class="fontclass">.icon-shuaxin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tiquliuliang"></i>
                    <div class="name">提取流量</div>
                    <div class="fontclass">.icon-tiquliuliang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiazai"></i>
                    <div class="name">下载</div>
                    <div class="fontclass">.icon-xiazai</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-youhuiquan"></i>
                    <div class="name">优惠券</div>
                    <div class="fontclass">.icon-youhuiquan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhuanzengliuliang"></i>
                    <div class="name">转赠流量</div>
                    <div class="fontclass">.icon-zhuanzengliuliang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhuanqugengduoliuliang"></i>
                    <div class="name">赚取更多流量</div>
                    <div class="fontclass">.icon-zhuanqugengduoliuliang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-cuowutishi"></i>
                    <div class="name">错误提示</div>
                    <div class="fontclass">.icon-cuowutishi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-alitongxinlogo"></i>
                    <div class="name">阿里通信logo</div>
                    <div class="fontclass">.icon-alitongxinlogo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-simqiaguzhang"></i>
                    <div class="name">sim卡故障</div>
                    <div class="fontclass">.icon-simqiaguzhang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-anquantianchong"></i>
                    <div class="name">安全_填充</div>
                    <div class="fontclass">.icon-anquantianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bangzhutianchong"></i>
                    <div class="name">帮助_填充</div>
                    <div class="fontclass">.icon-bangzhutianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bukaixintianchong"></i>
                    <div class="name">不开心_填充</div>
                    <div class="fontclass">.icon-bukaixintianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chuzuchetianchong"></i>
                    <div class="name">出租车_填充</div>
                    <div class="fontclass">.icon-chuzuchetianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-cuowutishitianchong"></i>
                    <div class="name">错误提示_填充</div>
                    <div class="fontclass">.icon-cuowutishitianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dibiaotianchong"></i>
                    <div class="name">地标_填充</div>
                    <div class="fontclass">.icon-dibiaotianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dengdaitianchong"></i>
                    <div class="name">等待_填充</div>
                    <div class="fontclass">.icon-dengdaitianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dianhuatianchong"></i>
                    <div class="name">电话_填充</div>
                    <div class="fontclass">.icon-dianhuatianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dianhuajianpantianchong"></i>
                    <div class="name">电话键盘_填充</div>
                    <div class="fontclass">.icon-dianhuajianpantianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-duihuaxinxitianchong"></i>
                    <div class="name">对话信息_填充</div>
                    <div class="fontclass">.icon-duihuaxinxitianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-faxiantianchong"></i>
                    <div class="name">发现_填充</div>
                    <div class="fontclass">.icon-faxiantianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-feijichangtianchong"></i>
                    <div class="name">飞机场_填充</div>
                    <div class="fontclass">.icon-feijichangtianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fenleiorguangchangorqitatianchong"></i>
                    <div class="name">分类or广场or其他_填充</div>
                    <div class="fontclass">.icon-fenleiorguangchangorqitatianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fenxiangtianchong"></i>
                    <div class="name">分享_填充</div>
                    <div class="fontclass">.icon-fenxiangtianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gengduotianchong"></i>
                    <div class="name">更多_填充</div>
                    <div class="fontclass">.icon-gengduotianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-huchudianhuatianchong"></i>
                    <div class="name">呼出电话_填充</div>
                    <div class="fontclass">.icon-huchudianhuatianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-hujiaozhuanyitianchong"></i>
                    <div class="name">呼叫转移_填充</div>
                    <div class="fontclass">.icon-hujiaozhuanyitianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiaxingshoucangtianchong"></i>
                    <div class="name">加星收藏_填充</div>
                    <div class="fontclass">.icon-jiaxingshoucangtianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-kaixintianchong"></i>
                    <div class="name">开心_填充</div>
                    <div class="fontclass">.icon-kaixintianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-laidianxianshitianchong"></i>
                    <div class="name">来电显示_填充</div>
                    <div class="fontclass">.icon-laidianxianshitianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-lipintianchong"></i>
                    <div class="name">礼品_填充</div>
                    <div class="fontclass">.icon-lipintianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qichezhantianchong"></i>
                    <div class="name">汽车站_填充</div>
                    <div class="fontclass">.icon-qichezhantianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qiantianchong"></i>
                    <div class="name">钱_填充</div>
                    <div class="fontclass">.icon-qiantianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qunzutianchong"></i>
                    <div class="name">群组_填充</div>
                    <div class="fontclass">.icon-qunzutianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shanchutianchong"></i>
                    <div class="name">删除_填充</div>
                    <div class="fontclass">.icon-shanchutianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shezhitianchong"></i>
                    <div class="name">设置_填充</div>
                    <div class="fontclass">.icon-shezhitianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shizhongtianchong"></i>
                    <div class="name">时钟_填充</div>
                    <div class="fontclass">.icon-shizhongtianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shipintianchong"></i>
                    <div class="name">视频_填充</div>
                    <div class="fontclass">.icon-shipintianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouyetianchong"></i>
                    <div class="name">首页_填充</div>
                    <div class="fontclass">.icon-shouyetianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-sousuotianchong"></i>
                    <div class="name">搜索_填充</div>
                    <div class="fontclass">.icon-sousuotianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tixingtianchong"></i>
                    <div class="name">提醒_填充</div>
                    <div class="fontclass">.icon-tixingtianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tianjiatianchong"></i>
                    <div class="name">添加_填充</div>
                    <div class="fontclass">.icon-tianjiatianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tianjiayonghutianchong"></i>
                    <div class="name">添加用户_填充</div>
                    <div class="fontclass">.icon-tianjiayonghutianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tianjiasimqiatianchong"></i>
                    <div class="name">添加sim卡_填充</div>
                    <div class="fontclass">.icon-tianjiasimqiatianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tongxunlutianchong"></i>
                    <div class="name">通讯录_填充</div>
                    <div class="fontclass">.icon-tongxunlutianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wuliutianchong"></i>
                    <div class="name">物流_填充</div>
                    <div class="fontclass">.icon-wuliutianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiaitianchong"></i>
                    <div class="name">喜爱_填充</div>
                    <div class="fontclass">.icon-xiaitianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xinfengtianchong"></i>
                    <div class="name">信封_填充</div>
                    <div class="fontclass">.icon-xinfengtianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiugaitianchong"></i>
                    <div class="name">修改_填充</div>
                    <div class="fontclass">.icon-xiugaitianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yiyuantianchong"></i>
                    <div class="name">医院_填充</div>
                    <div class="fontclass">.icon-yiyuantianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yinletianchong"></i>
                    <div class="name">音乐_填充</div>
                    <div class="fontclass">.icon-yinletianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yonghutianchong"></i>
                    <div class="name">用户_填充</div>
                    <div class="fontclass">.icon-yonghutianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zantianchong"></i>
                    <div class="name">赞_填充</div>
                    <div class="fontclass">.icon-zantianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhengquetishitianchong"></i>
                    <div class="name">正确提示_填充</div>
                    <div class="fontclass">.icon-zhengquetishitianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zuanshitianchong"></i>
                    <div class="name">钻石_填充</div>
                    <div class="fontclass">.icon-zuanshitianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zuojitianchong"></i>
                    <div class="name">座机_填充</div>
                    <div class="fontclass">.icon-zuojitianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-ktvtianchong"></i>
                    <div class="name">ktv_填充</div>
                    <div class="fontclass">.icon-ktvtianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-simguzhangtianchong"></i>
                    <div class="name">sim故障_填充</div>
                    <div class="fontclass">.icon-simguzhangtianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-simqiatianchong"></i>
                    <div class="name">sim卡_填充</div>
                    <div class="fontclass">.icon-simqiatianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wifitianchong"></i>
                    <div class="name">wifi_填充</div>
                    <div class="fontclass">.icon-wifitianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qingdantianchong"></i>
                    <div class="name">清单_填充</div>
                    <div class="fontclass">.icon-qingdantianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-rilitianchong"></i>
                    <div class="name">日历_填充</div>
                    <div class="fontclass">.icon-rilitianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-huochezhantianchong"></i>
                    <div class="name">火车站_填充</div>
                    <div class="fontclass">.icon-huochezhantianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tupiantianchong"></i>
                    <div class="name">图片_填充</div>
                    <div class="fontclass">.icon-tupiantianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shengyintianchong"></i>
                    <div class="name">声音_填充</div>
                    <div class="fontclass">.icon-shengyintianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-youxitianchong"></i>
                    <div class="name">游戏_填充</div>
                    <div class="fontclass">.icon-youxitianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wangting"></i>
                    <div class="name">网厅</div>
                    <div class="fontclass">.icon-wangting</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouji"></i>
                    <div class="name">手机</div>
                    <div class="fontclass">.icon-shouji</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-youhuiquanwenzi"></i>
                    <div class="name">优惠券_文字</div>
                    <div class="fontclass">.icon-youhuiquanwenzi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shoujitianchong"></i>
                    <div class="name">手机_填充</div>
                    <div class="fontclass">.icon-shoujitianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-kuandai"></i>
                    <div class="name">宽带</div>
                    <div class="fontclass">.icon-kuandai</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wangtingtianchong"></i>
                    <div class="name">网厅_填充</div>
                    <div class="fontclass">.icon-wangtingtianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shangjia"></i>
                    <div class="name">商家</div>
                    <div class="fontclass">.icon-shangjia</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shizhongxin"></i>
                    <div class="name">市中心</div>
                    <div class="fontclass">.icon-shizhongxin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-kuandaitianchong"></i>
                    <div class="name">宽带_填充</div>
                    <div class="fontclass">.icon-kuandaitianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xuanzekuangmoren"></i>
                    <div class="name">选择框_默认</div>
                    <div class="fontclass">.icon-xuanzekuangmoren</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chongliuliangtianchong"></i>
                    <div class="name">充流量_填充</div>
                    <div class="fontclass">.icon-chongliuliangtianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chongliuliang"></i>
                    <div class="name">充流量</div>
                    <div class="fontclass">.icon-chongliuliang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shoujitianchong1"></i>
                    <div class="name">手机_填充</div>
                    <div class="fontclass">.icon-shoujitianchong1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shoujichongzhitianchong"></i>
                    <div class="name">手机充值_填充</div>
                    <div class="fontclass">.icon-shoujichongzhitianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouji1"></i>
                    <div class="name">手机</div>
                    <div class="fontclass">.icon-shouji1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shoujichongzhi"></i>
                    <div class="name">手机充值</div>
                    <div class="fontclass">.icon-shoujichongzhi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shurutianchong"></i>
                    <div class="name">输入_填充</div>
                    <div class="fontclass">.icon-shurutianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shuru"></i>
                    <div class="name">输入</div>
                    <div class="fontclass">.icon-shuru</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiajiantou"></i>
                    <div class="name">下箭头</div>
                    <div class="fontclass">.icon-xiajiantou</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yibantishi"></i>
                    <div class="name">一般提示</div>
                    <div class="fontclass">.icon-yibantishi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yanjing"></i>
                    <div class="name">眼睛</div>
                    <div class="fontclass">.icon-yanjing</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-cesu"></i>
                    <div class="name">测速</div>
                    <div class="fontclass">.icon-cesu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chahuafeitianchong"></i>
                    <div class="name">查话费_填充</div>
                    <div class="fontclass">.icon-chahuafeitianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fasongxinxitianchong"></i>
                    <div class="name">发送信息_填充</div>
                    <div class="fontclass">.icon-fasongxinxitianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fasongxinxi"></i>
                    <div class="name">发送信息</div>
                    <div class="fontclass">.icon-fasongxinxi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wenbenbianjitianchong"></i>
                    <div class="name">文本编辑_填充</div>
                    <div class="fontclass">.icon-wenbenbianjitianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wenbenbianji"></i>
                    <div class="name">文本编辑</div>
                    <div class="fontclass">.icon-wenbenbianji</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chahuafei"></i>
                    <div class="name">查话费</div>
                    <div class="fontclass">.icon-chahuafei</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouye1"></i>
                    <div class="name">首页</div>
                    <div class="fontclass">.icon-shouye1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-anquan1"></i>
                    <div class="name">安全</div>
                    <div class="fontclass">.icon-anquan1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-baohusan"></i>
                    <div class="name">保护伞</div>
                    <div class="fontclass">.icon-baohusan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dibiao1"></i>
                    <div class="name">地标</div>
                    <div class="fontclass">.icon-dibiao1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-aixin"></i>
                    <div class="name">爱心</div>
                    <div class="fontclass">.icon-aixin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dengpao"></i>
                    <div class="name">灯泡</div>
                    <div class="fontclass">.icon-dengpao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bianji"></i>
                    <div class="name">编辑</div>
                    <div class="fontclass">.icon-bianji</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-duanxin"></i>
                    <div class="name">短信</div>
                    <div class="fontclass">.icon-duanxin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-diannao"></i>
                    <div class="name">电脑</div>
                    <div class="fontclass">.icon-diannao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-erweima1"></i>
                    <div class="name">二维码</div>
                    <div class="fontclass">.icon-erweima1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-duihuan1"></i>
                    <div class="name">兑换</div>
                    <div class="fontclass">.icon-duihuan1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-duofangtonghua"></i>
                    <div class="name">多方通话</div>
                    <div class="fontclass">.icon-duofangtonghua</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fenxiang1"></i>
                    <div class="name">分享</div>
                    <div class="fontclass">.icon-fenxiang1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gouwushangcheng"></i>
                    <div class="name">购物商城</div>
                    <div class="fontclass">.icon-gouwushangcheng</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-guanbi1"></i>
                    <div class="name">关闭</div>
                    <div class="fontclass">.icon-guanbi1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-guhua"></i>
                    <div class="name">固话</div>
                    <div class="fontclass">.icon-guhua</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gouwuche"></i>
                    <div class="name">购物车</div>
                    <div class="fontclass">.icon-gouwuche</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jilu"></i>
                    <div class="name">记录</div>
                    <div class="fontclass">.icon-jilu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-kuaidiyunshu"></i>
                    <div class="name">快递运输</div>
                    <div class="fontclass">.icon-kuaidiyunshu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-hongbao"></i>
                    <div class="name">红包</div>
                    <div class="fontclass">.icon-hongbao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-huangguan1"></i>
                    <div class="name">皇冠</div>
                    <div class="fontclass">.icon-huangguan1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-quan"></i>
                    <div class="name">券</div>
                    <div class="fontclass">.icon-quan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qun"></i>
                    <div class="name">群</div>
                    <div class="fontclass">.icon-qun</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-saoma"></i>
                    <div class="name">扫码</div>
                    <div class="fontclass">.icon-saoma</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qiche"></i>
                    <div class="name">汽车</div>
                    <div class="fontclass">.icon-qiche</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-lipin"></i>
                    <div class="name">礼品</div>
                    <div class="fontclass">.icon-lipin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shanchu1"></i>
                    <div class="name">删除</div>
                    <div class="fontclass">.icon-shanchu1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shangchuan1"></i>
                    <div class="name">上传</div>
                    <div class="fontclass">.icon-shangchuan1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-kuandai1"></i>
                    <div class="name">宽带</div>
                    <div class="fontclass">.icon-kuandai1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shengyin1"></i>
                    <div class="name">声音</div>
                    <div class="fontclass">.icon-shengyin1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shirenrenzheng"></i>
                    <div class="name">实人认证</div>
                    <div class="fontclass">.icon-shirenrenzheng</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shezhi1"></i>
                    <div class="name">设置</div>
                    <div class="fontclass">.icon-shezhi1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shipin1"></i>
                    <div class="name">视频</div>
                    <div class="fontclass">.icon-shipin1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouji2"></i>
                    <div class="name">手机</div>
                    <div class="fontclass">.icon-shouji2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shoucang"></i>
                    <div class="name">收藏</div>
                    <div class="fontclass">.icon-shoucang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-sousuo1"></i>
                    <div class="name">搜索</div>
                    <div class="fontclass">.icon-sousuo1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shuaxin1"></i>
                    <div class="name">刷新</div>
                    <div class="fontclass">.icon-shuaxin1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-taocanyuliang"></i>
                    <div class="name">套餐余量</div>
                    <div class="fontclass">.icon-taocanyuliang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-suo"></i>
                    <div class="name">锁</div>
                    <div class="fontclass">.icon-suo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tiquliuliang1"></i>
                    <div class="name">提取流量</div>
                    <div class="fontclass">.icon-tiquliuliang1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tonghua"></i>
                    <div class="name">通话</div>
                    <div class="fontclass">.icon-tonghua</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tongji"></i>
                    <div class="name">统计</div>
                    <div class="fontclass">.icon-tongji</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wendang"></i>
                    <div class="name">文档</div>
                    <div class="fontclass">.icon-wendang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tupian1"></i>
                    <div class="name">图片</div>
                    <div class="fontclass">.icon-tupian1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tongxunlu1"></i>
                    <div class="name">通讯录</div>
                    <div class="fontclass">.icon-tongxunlu1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wenjianjia"></i>
                    <div class="name">文件夹</div>
                    <div class="fontclass">.icon-wenjianjia</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wendangxiugai"></i>
                    <div class="name">文档修改</div>
                    <div class="fontclass">.icon-wendangxiugai</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiyiji"></i>
                    <div class="name">洗衣机</div>
                    <div class="fontclass">.icon-xiyiji</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiazai1"></i>
                    <div class="name">下载</div>
                    <div class="fontclass">.icon-xiazai1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wodetongxin"></i>
                    <div class="name">我的通信</div>
                    <div class="fontclass">.icon-wodetongxin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiangji"></i>
                    <div class="name">相机</div>
                    <div class="fontclass">.icon-xiangji</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xinxi"></i>
                    <div class="name">信息</div>
                    <div class="fontclass">.icon-xinxi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yingyeting"></i>
                    <div class="name">营业厅</div>
                    <div class="fontclass">.icon-yingyeting</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yibantishi1"></i>
                    <div class="name">一般提示</div>
                    <div class="fontclass">.icon-yibantishi1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yuliang"></i>
                    <div class="name">余量</div>
                    <div class="fontclass">.icon-yuliang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zan1"></i>
                    <div class="name">赞</div>
                    <div class="fontclass">.icon-zan1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhengquetishi1"></i>
                    <div class="name">正确提示</div>
                    <div class="fontclass">.icon-zhengquetishi1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhongyaotishi"></i>
                    <div class="name">重要提示</div>
                    <div class="fontclass">.icon-zhongyaotishi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yonghu1"></i>
                    <div class="name">用户</div>
                    <div class="fontclass">.icon-yonghu1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yunduantongbu"></i>
                    <div class="name">云端同步</div>
                    <div class="fontclass">.icon-yunduantongbu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhuanzengliuliang1"></i>
                    <div class="name">转赠流量</div>
                    <div class="fontclass">.icon-zhuanzengliuliang1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-simqia1"></i>
                    <div class="name">sim卡</div>
                    <div class="fontclass">.icon-simqia1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zuanshi1"></i>
                    <div class="name">钻石</div>
                    <div class="fontclass">.icon-zuanshi1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wifi1"></i>
                    <div class="name">wifi</div>
                    <div class="fontclass">.icon-wifi1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhuanquliuliang"></i>
                    <div class="name">赚取流量</div>
                    <div class="fontclass">.icon-zhuanquliuliang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yujing"></i>
                    <div class="name">预警</div>
                    <div class="fontclass">.icon-yujing</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-kaixin1"></i>
                    <div class="name">开心</div>
                    <div class="fontclass">.icon-kaixin1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bangding"></i>
                    <div class="name">绑定</div>
                    <div class="fontclass">.icon-bangding</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fapiao"></i>
                    <div class="name">发票</div>
                    <div class="fontclass">.icon-fapiao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiechubangding"></i>
                    <div class="name">解除绑定</div>
                    <div class="fontclass">.icon-jiechubangding</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-rili1"></i>
                    <div class="name">日历</div>
                    <div class="fontclass">.icon-rili1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shijian"></i>
                    <div class="name">时间</div>
                    <div class="fontclass">.icon-shijian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-guojiliuliangbao"></i>
                    <div class="name">国际流量包</div>
                    <div class="fontclass">.icon-guojiliuliangbao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-taocan"></i>
                    <div class="name">套餐</div>
                    <div class="fontclass">.icon-taocan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhangdan"></i>
                    <div class="name">账单</div>
                    <div class="fontclass">.icon-zhangdan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-huafeiquan"></i>
                    <div class="name">话费券</div>
                    <div class="fontclass">.icon-huafeiquan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-liuliangquan"></i>
                    <div class="name">流量券</div>
                    <div class="fontclass">.icon-liuliangquan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-duigou1"></i>
                    <div class="name">对勾</div>
                    <div class="fontclass">.icon-duigou1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shangjiantou"></i>
                    <div class="name">上箭头</div>
                    <div class="fontclass">.icon-shangjiantou</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiajiantou1"></i>
                    <div class="name">下箭头</div>
                    <div class="fontclass">.icon-xiajiantou1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-youjiantou"></i>
                    <div class="name">右箭头</div>
                    <div class="fontclass">.icon-youjiantou</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiaoguanbi"></i>
                    <div class="name">小关闭</div>
                    <div class="fontclass">.icon-xiaoguanbi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zuojiantou"></i>
                    <div class="name">左箭头</div>
                    <div class="fontclass">.icon-zuojiantou</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shoujichongzhi1"></i>
                    <div class="name">手机充值</div>
                    <div class="fontclass">.icon-shoujichongzhi1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiajiantou2"></i>
                    <div class="name">下箭头</div>
                    <div class="fontclass">.icon-xiajiantou2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-duigou2"></i>
                    <div class="name">对勾</div>
                    <div class="fontclass">.icon-duigou2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shangjiantou1"></i>
                    <div class="name">上箭头</div>
                    <div class="fontclass">.icon-shangjiantou1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiaoguanbi1"></i>
                    <div class="name">小关闭</div>
                    <div class="fontclass">.icon-xiaoguanbi1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tingyong"></i>
                    <div class="name">停用</div>
                    <div class="fontclass">.icon-tingyong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-youjiantou1"></i>
                    <div class="name">右箭头</div>
                    <div class="fontclass">.icon-youjiantou1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zuojiantou1"></i>
                    <div class="name">左箭头</div>
                    <div class="fontclass">.icon-zuojiantou1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-huafeiquan1"></i>
                    <div class="name">话费券</div>
                    <div class="fontclass">.icon-huafeiquan1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-liuliangquan1"></i>
                    <div class="name">流量券</div>
                    <div class="fontclass">.icon-liuliangquan1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shoujiduanxin"></i>
                    <div class="name">手机短信</div>
                    <div class="fontclass">.icon-shoujiduanxin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiatingyijianchongzhi"></i>
                    <div class="name">家庭一键充值</div>
                    <div class="fontclass">.icon-jiatingyijianchongzhi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhiding"></i>
                    <div class="name">置顶</div>
                    <div class="fontclass">.icon-zhiding</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tianjia1"></i>
                    <div class="name">添加</div>
                    <div class="fontclass">.icon-tianjia1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yibanduihuan"></i>
                    <div class="name">一般兑换</div>
                    <div class="fontclass">.icon-yibanduihuan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bangzhu1"></i>
                    <div class="name">帮助</div>
                    <div class="fontclass">.icon-bangzhu1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-goumai"></i>
                    <div class="name">购买</div>
                    <div class="fontclass">.icon-goumai</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-money"></i>
                    <div class="name">money</div>
                    <div class="fontclass">.icon-money</div>
                </li>
            
        </ul>

        <h2 id="font-class-">font-class引用</h2>
        <hr>

        <p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p>
        <p>与unicode使用方式相比，具有如下特点：</p>
        <ul>
        <li>兼容性良好，支持ie8+，及所有现代浏览器。</li>
        <li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li>
        <li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li>
        <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>


        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">icon-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
        <blockquote>
        <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
        </blockquote>
    </div>
</body>
</html>
